<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 1226px;
            height: 686px;
            margin: 0 auto;
            /* background-color: rgb(0, 140, 255); */
        }

        .box-hd {
            height: 58px;
            /* background-color: burlywood; */
        }

        .box-hd .title {
            margin: 0;
            float: left;
            font-size: 22px;
            line-height: 58px;
            color: #333;
        }

        .box-hd .more {
            float: right;
            font-size: 16px;
            line-height: 58px;
            color: #424242;
        }

        .box-bd {
            /* width: 1226px; */
            height: 628px;
            /* background-color: cadetblue; */
        }

        .box-bd .ad {
            float: left;
            width: 234px;
            height: 628px;
            /* background-color: red; */    
        }

        .box-bd .ad img{
            width: 234px;
            height: 614px;  
        }

        .box .brick-list {
            float: left;
            width: 992px;
            height: 628px;
            /* background-color: salmon; */
        }

        .box-bd .brick-item {
            float: left;
            height: 260px;
            width: 214px;
            padding: 20px 10px;
            background-color: #fff;
            margin-left: 14px;
            margin-bottom: 14px;
            /* 这个属性会继承 */
            text-align: center;
        }

        .box-bd .brick-item .bg {
            width: 160px;
            height: 160px;
            /* background-color: red; */
            margin: 0 auto 18px;
        }

        .box-bd .brick-item .bg img {
            display: block;
            width: 160px;
            height: 160px;
        }

        .box-bd .brick-item .title {
            font-size: 14px;
            line-height: 21px;
            color: #333;
            font-weight: 400;
            margin-bottom: 2px;
        }

        .box-bd .brick-item .desc {
            font-size: 12px;
            color: #b0b0b0;
            line-height: 18px;
            margin-bottom: 10px;
        }

        .box-bd .brick-item .price {
            color: #ff6700;
            font-size: 14px;
            line-height: 21px;
        }

        .box-bd .brick-item del {
            color: #b0b0b0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-hd">
            <span class="title">手机</span>
            <a class="more" href="https://www.mi.com/p/1915.html">查看更多</a>
        </div>
        <div class="box-bd">
            <div class="ad">
                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=351&h=921&f=webp&q=90"
                        alt="">
                </a>
            </div>
            <ul class="brick-list">
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5c752522100ecd364cc53752bb660bc.jpg?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">Xiaomi Civi</h3>
                        <div class="desc">
                            Xiaomi Civi
                        </div>
                        <div class="price">
                            <span>2599元</span>
                            <!-- <del>1699元</del> -->
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">Xiaomi MIX4</h3>
                        <div class="desc">
                            CUP全面屏
                        </div>
                        <div class="price">
                            <span>4999元</span>
                            <!-- <del>1699元</del> -->
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">Note 10 PRO</h3>
                        <div class="desc">
                            天玑1100年底旗舰芯片
                        </div>
                        <div class="price">
                            <span>1599元</span>
                            <del>1699元</del>
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8909080ddb0851af0b87530e2927844f.jpg?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">Redmi Note 10 5G</h3>
                        <div class="desc">
                            5G小金刚｜旗舰长续航
                        </div>
                        <div class="price">
                            <span>1099元</span>
                            <!-- <del>2299元</del> -->
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">小米MIX FOLD</h3>
                        <div class="desc">
                            折叠大屏｜自研芯片
                        </div>
                        <div class="price">
                            <span>9999元</span>
                            <!-- <del>1699元</del> -->
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">小米11 Ultra</h3>
                        <div class="desc">
                            1/1.12''GN2｜2K四微曲屏
                        </div>
                        <div class="price">
                            <span>5499元</span>
                            <del>5999元</del>
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">小米11 Pro</h3>
                        <div class="desc">
                            1/1.12''GN2｜骁龙888
                        </div>
                        <div class="price">
                            <span>4499元</span>
                            <del>4999元</del>
                        </div>
                    </a>
                </li>
                <li class="brick-item">
                    <a href="">
                        <div class="bg">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=300&h=300&f=webp&q=90"
                                alt="">
                        </div>
                        <h3 class="title">小米11 青春版</h3>
                        <div class="desc">
                            小米11 青春版 轻薄
                        </div>
                        <div class="price">
                            <span>2099元</span>
                            <del>2299元</del>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>